<template>
<view class="container">
    <view class="recharge-box">
        <view class="recharge-item pay title">支付方式</view>
        <view class="recharge-item time title">日期</view>
        <view class="recharge-item price title">金额</view>
        <view class="recharge-item status title">状态</view>
    </view>
    <view v-for="(item, index) in recharges" :key="index" class="recharge-box">
        <view class="recharge-item pay">{{item.pay_name ? item.pay_name : ''}}</view>
        <view class="recharge-item time">{{item.cTimeFommat}}</view>
        <view class="recharge-item price">{{item.account}}</view>
        <view class="recharge-item status">{{item.pay_status==0?'待支付':''}}{{item.pay_status==1?'已支付':''}}{{item.pay_status==2?'支付失败':''}}</view>
    </view>
</view>
</template>

<script>
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      recharges: null,
      //请求的充值记录
      currentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, '', 'recharges');
    this.requestChangeList();
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestChangeList();
    }
  },
  onPullDownRefresh: function () {
    this.recharges = null;
    this.currentPage = 1;
    load.resetConfig();
    this.requestChangeList();
  },
  methods: {
    requestChangeList: function () {
      var that = this;
      var requestUrl = '/api/user/recharge_list/' + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        res.data.result.forEach(function (val, index, arr) {
          val.cTimeFommat = util.format(val.ctime, 'yyyy-MM-dd');
        });
        uni.stopPullDownRefresh();
      });
    }
  }
};
</script>
<style>
page{
    background-color: white;
}
.recharge-box{
    font-size: 28rpx;
    padding: 25rpx 30rpx;
    border-bottom: 1rpx solid #f3f3f3;
}
.recharge-item{
    display: inline-block; 
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666666;
    box-sizing: border-box;
    text-align: center;
}
.recharge-box .pay{
    width: 35%;
}
.recharge-box .time{
    width: 23%;
}
.recharge-box .price{
    width: 20%;
}
.recharge-box .status{
    width: 22%;
    color: #e01222;
}
.recharge-box .title{
    color: #666666;
    font-size: 32rpx;
}

</style>